<template>
  <div class="cause">
    <div class="web">
      <img src="../assets/Cause/banner.png" class="banner">
      <!--导航-->
      <div class="nav">
        <div class="box">
          <div class="item" :class="{active:navIndex == 0}" @click="changeNavIndex(0)">
            <img src="../assets/common/phone.png" style="margin-bottom: 16px">
            <div>VR娱乐事业</div>
          </div>
          <div class="item" :class="{active:navIndex == 1}" @click="changeNavIndex(1)">
            <img src="../assets/common/phone.png" style="margin-bottom: 16px">
            <div>智慧照明事业</div>
          </div>
          <div class="item" :class="{active:navIndex == 2}" @click="changeNavIndex(2)">
            <img src="../assets/common/phone.png" style="margin-bottom: 16px">
            <div>文化旅游事业</div>
          </div>
          <div class="item" :class="{active:navIndex == 3}" @click="changeNavIndex(3)">
            <img src="../assets/common/phone.png" style="margin-bottom: 16px">
            <div>智能显示事业</div>
          </div>
          <div class="item" :class="{active:navIndex == 4}" @click="changeNavIndex(4)">
            <img src="../assets/common/phone.png" style="margin-bottom: 16px">
            <div>国际显示事业</div>
          </div>
        </div>
      </div>
      <!--内容-->
      <div class="context">
        <!--临时填充-->
        <img src="../assets/temp/wen.png" style="display: block;width: 1200px;margin: 0 auto">
        <!--真实数据-->
        <!--<div v-html="context"></div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navIndex: 0,
      context: ''
    }
  },
  methods: {
    changeNavIndex(navIndex) {
      this.navIndex = navIndex
      if (index == 0) {
        // VR娱乐事业
        this.context = ''
      }
      if (index == 1) {
        // 智慧照明事业
        this.context = ''
      }
      if (index == 2) {
        // 文化旅游事业
        this.context = ''
      }
      if (index == 3) {
        // 智能显示事业
        this.context = ''
      }
      if (index == 4) {
        // 国际显示事业
        this.context = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cause {
  .web {
    .banner {
      width: 100vw;
    }

    .nav {
      width: 100vw;
      height: 136px;
      background: #F9F9F9;
      transform: translateY(-5px);

      .box {
        width: 1000px;
        margin: 0 auto;
        display: flex;
        align-items: center;

        .item {
          cursor: pointer;
          width: 200px;
          height: 138px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }

        .active {
          color: #fff;
          background: #4491FF;
        }
      }
    }

    .context {
      width: 1200px;
      padding: 40px;
      margin:  0 auto;
    }
  }
}
</style>
